<template>
    <div style="width: 100%; height: 100%; min-height: 1800px; background-color: #fff">
        <div style="width: 1200px; margin: 0 auto; " class="bigbox" >
            <div>
                <div style="display: block">
                    <span class="biaoqian">原创作品</span>
                    <h1>{{name}}</h1>
                </div>
                <div class="litteBiaoQian">
                    {{views}}&nbsp;播放量
                </div>
                <div class="litteBiaoQian" style="margin-left: 20px; width: 500px">
                    {{video.time}}
                </div>
            </div>
            <video-play-item  :url="url" class="player"></video-play-item>
            <div class="plNum">
                <div>
                <span class="plNum2">
                    {{pl}}
                </span>
                    <span>条评论</span>
                    <span class="liuyan">在这里留下你精彩的评论吧 ！！！</span>
                    <el-switch
                            v-model="value2"
                            :active-text="danmu"
                            @change="danmuchange">
                    </el-switch>
                    <div class="danmu">
                        <input type="text" class="danmu-input" placeholder="发个弹幕试一下吧">
                        <div class="danmu-submit">发送</div>
                    </div>

                </div>
            </div>
            <div class="dianZan">
                <div @click="addPoint">
                    <svg t="1610354219056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4938" width="200" height="200"><path d="M691.2 870.4H422.912c-10.24 0-17.408-8.192-17.408-17.408 0-10.24 8.192-17.408 17.408-17.408h268.288c19.456 0 35.84-9.216 46.08-25.6 7.168-17.408 79.872-201.728 94.208-256 12.288-48.128-15.36-97.28-63.488-109.568-7.168-2.048-14.336-3.072-23.552-3.072H636.928c-6.144 0-11.264-3.072-14.336-8.192-3.072-5.12-4.096-11.264-2.048-16.384 10.24-27.648 16.384-92.16 16.384-173.056 0-29.696-24.576-53.248-53.248-53.248-29.696 0-53.248 24.576-53.248 53.248v17.408c0 118.784-96.256 215.04-215.04 215.04-10.24 0-17.408-8.192-17.408-17.408 0-10.24 8.192-17.408 17.408-17.408 98.304 0 179.2-79.872 179.2-179.2v-17.408c0-49.152 39.936-89.088 89.088-89.088 49.152 0 89.088 39.936 89.088 89.088 0 43.008-2.048 113.664-12.288 161.792h83.968c12.288 0 22.528 1.024 32.768 4.096 66.56 17.408 106.496 87.04 89.088 153.6-15.36 57.344-93.184 252.928-96.256 261.12 0 1.024-1.024 2.048-1.024 2.048-15.36 26.624-43.008 43.008-73.728 44.032-2.048-1.024-3.072-1.024-4.096-1.024z" fill="#333333" p-id="4939"></path><path d="M315.392 870.4H225.28c-39.936 0-71.68-31.744-71.68-71.68V512c0-39.936 31.744-71.68 71.68-71.68h89.088c10.24 0 17.408 8.192 17.408 17.408v394.24c1.024 10.24-7.168 18.432-16.384 18.432zM225.28 476.16c-19.456 0-35.84 16.384-35.84 35.84v286.72c0 19.456 16.384 35.84 35.84 35.84h71.68v-358.4h-71.68z" fill="#333333" p-id="4940"></path></svg>
                    <span id="point">{{point}}</span>
                </div>
                <div @click="addCollection">
                    <svg t="1610354309012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6408" data-spm-anchor-id="a313x.7781069.0.i15" width="200" height="200"><path d="M357.5 680c-8.5 0-15.8-6.3-16.9-15-8.2-67.6-18.7-109.1-56.2-162.3-17.3-22.8-27.6-41.6-21.9-58.9 5.1-15.8 22.9-27.5 52.8-34.8 61.8-20.3 107.5-52.9 139.7-99.8 5.3-7.7 15.9-9.7 23.6-4.4 7.7 5.3 9.7 15.9 4.4 23.6-36.7 53.4-88.3 90.4-157.8 113.1l-0.6 0.2-0.6 0.2c-21.1 5.1-27.5 10.8-29 12.4 0.3 2.2 2.5 9.4 16.7 28.1l0.3 0.5c41.6 58.9 53.6 106.2 62.4 178 1.1 9.3-5.5 17.8-14.8 18.9-0.7 0.2-1.4 0.2-2.1 0.2z m-62.6-226.3z" fill="#2c2c2c" p-id="6409" data-spm-anchor-id="a313x.7781069.0.i16" class="selected"></path><path d="M506.8 160.7c0.9 0.2 14.7 4 37.8 41.7 60.6 98.8 148.3 162.6 260.8 189.8 44.4 10.7 51.3 23.1 51.3 23.2s1.8 14.2-27.9 49.1c-75 88.2-108.5 191.5-99.6 307 3.5 44.6-5.7 55.7-6.2 56.2-0.5 0.3-2.8 1-7.3 1-8 0-22.8-2.2-47.8-12.5-53.2-22-107.5-33.2-161.2-33.2s-108 11.2-161.2 33.2c-24.9 10.3-39.7 12.5-47.8 12.5-4.5 0-6.8-0.7-7.3-1-0.5-0.5-9.6-11.5-6.2-56.2 8.9-115.5-24.6-218.8-99.6-307-29.7-34.9-28-49-28-49.1s6.9-12.5 51.3-23.2c112.5-27.2 200.2-91 260.8-189.8 23.4-37.7 37.2-41.5 38.1-41.7m0-50c-26.8 0-53.6 21.9-80.5 65.6-53.6 87.5-130.3 143.3-229.9 167.3-99.6 24.1-116.2 75.2-49.7 153.4 66.5 78.1 95.7 168.4 87.8 270.8-5.7 74 15.4 111 63.3 111 18.4 0 40.6-5.4 66.9-16.3 47.4-19.6 94.7-29.4 142.1-29.4s94.7 9.8 142.1 29.4c26.2 10.8 48.5 16.3 66.9 16.3 48 0 69.1-37 63.3-111-7.9-102.4 21.3-192.6 87.8-270.8 66.5-78.1 49.9-129.3-49.7-153.3-99.6-24.1-176.3-79.9-229.9-167.3-26.9-43.8-53.7-65.7-80.5-65.7z" fill="#1A1A1A" p-id="6410"></path></svg>
                    <span id="collection">{{collection}}</span>
                </div>
                <div>
                    <svg t="1610354489638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6953" width="200" height="200"><path d="M470.89849854 510.48553467L811.82458497 169.55944825q21.3079834-21.3079834 42.61596678 0t0 42.61596679L513.51446533 553.10150146q-21.3079834 21.3079834-42.61596679 0t0-42.61596679z" fill="#363F4D" p-id="6954"></path><path d="M873.60702515 451.73202515v301.33905029a120.53594971 120.53594971 0 0 1-120.53594971 120.53594971H270.92974854A120.53594971 120.53594971 0 0 1 150.39297485 753.07107544V270.92974854A120.53594971 120.53594971 0 0 1 270.92892456 150.39297485h301.33905029-180.80392456v60.26797486h413.80004883-534.33517456a60.26797485 60.26797485 0 0 0-60.26797485 60.26797485V753.07025146a60.26797485 60.26797485 0 0 0 60.26797485 60.26797486H753.07025146a60.26797485 60.26797485 0 0 0 60.26797486-60.26797486V632.53594971h60.26797485V451.73202515z" fill="#363F4D" p-id="6955"></path><path d="M873.60702515 210.66094971v271.20547485a30.13357544 30.13357544 0 1 1-60.26797486 0V240.79452515a30.13357544 30.13357544 0 0 0-30.13357544-30.13357544H542.13275146a30.13357544 30.13357544 0 0 1 0-60.26797486h301.33987427a30.13357544 30.13357544 0 0 1 30.13357544 30.13357544v30.13439942z" fill="#363F4D" p-id="6956"></path></svg>
                    <span></span>
                </div>
                <div>
                    <span class="el-icon-download download" ></span>
                </div>
            </div>
            <div class="plInput">
                <div class="myHeadImg">
                    <img :src="myHeadImg" alt="">
                </div>
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="textarea"
                        style="width: 700px;"

                >
                </el-input>
                <el-button type="primary" class="subBtn" @click="submitComment">提交评论</el-button>
            </div>
            <div>
                <ul class="pl-type">
                    <li class="pl-active">按热度排序</li>
                    <li>按时间排序</li>
                </ul>
            </div>
            <div class="plBox">
                <div class="plItem" v-for="item in comment">
                    <div class="plImg">
                        <img class="plImgHead" :src="item.imgUrl" height="44" width="44"/>
                    </div>
                    <div class="plheadName">
                        <span class="name">{{item.nickName}}</span>
                        <span class="time">{{item.time}}</span>
                    </div>
                    <div class="plText">
                        {{item.msg}}
                        <a class="huifu">回复</a>
                    </div>
                </div>
            </div>
            <div class="right-list">
                <div class="video-list">
                    <div class="list-head">
                        视频选集
                        <svg style="width: 30px; height: 30px; position: absolute; top: -8px; left: 105px; cursor: pointer" t="1612264506803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2158" width="200" height="200"><path d="M233.184 263.16c-22.936 0-43.448 20.512-43.448 43.448s20.512 42.24 43.448 42.24c22.928 0 42.24-19.312 42.24-42.24s-19.312-43.448-42.24-43.448zM865.336 306c0 18.776-13.68 34-30.544 34H370.72c-16.864 0-30.536-15.224-30.536-34S353.856 272 370.72 272h464.072c16.864 0 30.544 15.224 30.544 34zM233.184 472.496c-22.936 0-43.448 20.512-43.448 43.448s20.512 42.24 43.448 42.24c22.928 0 42.24-19.312 42.24-42.24s-19.312-43.448-42.24-43.448zM865.336 515.336c0 18.776-13.68 34-30.544 34H370.72c-16.864 0-30.536-15.224-30.536-34 0-18.784 13.672-34 30.536-34h464.072c16.864 0 30.544 15.216 30.544 34z" p-id="2159" fill="#707070"></path><path d="M233.184 681.832c-22.936 0-43.448 20.512-43.448 43.448s20.512 42.24 43.448 42.24c22.928 0 42.24-19.312 42.24-42.24s-19.312-43.448-42.24-43.448zM865.336 724.672c0 18.776-13.68 34-30.544 34H370.72c-16.864 0-30.536-15.224-30.536-34 0-18.784 13.672-34 30.536-34h464.072c16.864 0 30.544 15.216 30.544 34z" p-id="2160" fill="#707070"></path></svg>
                    </div>
                    <ul>
                        <li class="active">P1 01 {{this.name}}</li>
<!--                        <li>P1 01 {{this.name}}</li>-->
                    </ul>
                </div>
                <div>
                    <div class="tuijian">热门推荐</div>
                    <br/>
                    <div class="remeng-tuijian" v-for="item in remen" @click="changePage(item.id)" >
                        <img :src="item.imgUrl" alt="">
                        <p class="title">{{item.name}}</p>
                        <span class="up">{{item.upName}}</span>
                        <span class="bo">{{item.views}}次播放  {{item.point}}次点赞</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import videoPlayItem from "../../components/common/video";
    import {request} from "../../network/request";
    import constant from "../../utils/constant";
    import netRequest from "../../network/netRequest";
    export default {
        name: "video-play",
        data() {
            return {
                danmu:'开启弹幕',
                value2:'',
                textarea: '',
                url:this.$route.query.url,
                id:this.$route.query.id,
                name:this.$route.query.name,
                collection:parseInt(this.$route.query.collection),
                views:'',
                size:this.$route.query.size,
                time:this.$route.query.time,
                upId:this.$route.query.upId,
                upName:this.$route.query.upName,
                des:this.$route.query.des,
                point:parseInt(this.$route.query.point),
                pl:50,
                isPoint:0,
                isCollection:0,
                myHeadImg:sessionStorage.getItem("imgUrl"),
                comment:[],
                SendPoint:true,
                sendCollection:true,
                userId:sessionStorage.getItem("userId"),
                remen:[],
                video:[]
            }
        },

        components:{
            videoPlayItem,
        },
        created() {
            netRequest.addOneView(this.id).then(res => {
                this.video = res.data;
            })
            request({
                url:"/addOneView",
                method: "post",
                params:{
                    id:parseInt(this.$route.query.id)
                }
            }).then(res=>{
                this.views = res.data.views;
                this.point = res.data.point;
                this.collection = res.data.collection;
            }).catch(err=>{
                console.log(err);
            });
            request({
                url:"/getVideoList",
                method: "get",
                params:{
                }
            }).then(res=>{
                //console.log(res.data);
                this.remen = res.data;
            }).catch(err=>{
                console.log(err);
            });


            console.log(this.$route.query.id);
            request({
                url:"/getAllComment",
                method: "post",
                params:{
                    videoId:parseInt(this.$route.query.id)
                }
            }).then(res=>{
                this.comment = res.data;
                this.comment.reverse();
                for (let i = 0; i < this.comment.length; i++){
                    this.getImgHead(i, this.comment[i].userId);
                }
            }).catch(err=>{
                console.log(err);
            });

        },
        methods:{
            changePage(id){
                let data = netRequest.addOneView(id).then(res => {
                    console.log(res.data);
                    let data = res.data;
                    this.$router.push({
                        path:"/videoPlay",
                        query:{
                            url:data.url,
                            name:data.name,
                            point:data.point,
                            views:data.views,
                            collection:data.collection,
                            id:data.id,
                            size:data.size,
                            upId:data.upId,
                            upName:data.upName,
                            des:data.des,
                            imgUrl:data.imgUrl,
                            time:data.time,
                        }
                    });
                    location.reload();
                });

            },
            danmuchange(){
              if(this.value2 == true){
                  this.danmu = '开启弹幕';
              }else{
                  this.danmu = '关闭弹幕';
              }
            },
            getImgHead(i, userId){
                request({
                    url:"/getImgUrl",
                    method: "post",
                    params:{
                        userId:userId
                    }
                }).then(res=>{
                    this.comment[i].imgUrl = res.data;
                    console.log(res.data)
                }).catch(err=>{
                    console.log(err);
                });
            },
            addPoint(){
                if(this.userId == null){
                    this.$router.replace("/login");
                }
                if(this.isPoint == 0){
                    this.point += 1;
                    document.getElementById("point").style.color = "#00b0ff";
                }
                else{
                    document.getElementById("point").style.color = "black";
                    this.point -= 1;
                }
                this.isPoint ^= 1;
                request({
                    url:"/addOnePoint",
                    method: "post",
                    params:{
                        id:parseInt(this.$route.query.id)
                    }
                }).then(res=>{

                   // console.log(res.data);

                }).catch(err=>{
                    console.log(err);
                });

                if (this.SendPoint){
                    this.SendPoint = false;
                    let userId = sessionStorage.getItem("userId");
                    let videoId = parseInt(this.id);
                    let nickName = sessionStorage.getItem("nickName");
                    let time = new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月" + new Date().getDate() + "日";
                    console.log(this.$route.query.imgUrl);
                    //给up猪发一个通知消息
                    request({
                        url:"/insertOneSysNotify",
                        method: "get",
                        params:{
                            userId:parseInt(this.upId),
                            sendId: parseInt(userId),
                            msg: "给我的视频点了一个赞",
                            pl: "",
                            time:time,
                            nickName:nickName,
                            imgUrl:sessionStorage.getItem("imgUrl"),
                            state:0,
                            type:"video",
                            id:this.id,
                            videoImg:this.$route.query.imgUrl
                        }
                    }).then(res=>{

                        console.log(res.data);

                    }).catch(err=>{
                        console.log(err);
                    });
                }
            },
            addCollection(){
                if(this.userId == null){
                    this.$router.replace("/login");
                }
                if(this.isCollection == 0){
                    this.collection += 1;
                    document.getElementById("collection").style.color = "#00b0ff";
                }
                else{
                    document.getElementById("collection").style.color = "black";
                    this.collection -= 1;
                }
                this.isCollection ^= 1;
                request({
                    url:"/addOneCollection",
                    method: "post",
                    params:{
                        userId:parseInt(sessionStorage.getItem("userId")),
                        id:parseInt(this.$route.query.id)
                    }
                }).then(res=>{

                    console.log(res.data);

                }).catch(err=>{
                    console.log(err);
                });

                if(this.sendCollection){
                    this.sendCollection = false;
                    let userId = sessionStorage.getItem("userId");
                    let videoId = parseInt(this.id);
                    let nickName = sessionStorage.getItem("nickName");
                    let time = new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月" + new Date().getDate() + "日";
                    //给up猪发一个通知消息
                    request({
                        url:"/insertOneSysNotify",
                        method: "get",
                        params:{
                            userId:parseInt(this.upId),
                            sendId: parseInt(userId),
                            msg: "收藏了我的视频",
                            pl: "",
                            time:time,
                            nickName:nickName,
                            imgUrl:sessionStorage.getItem("imgUrl"),
                            state:0,
                            type:"video",
                            id:this.id,
                            videoImg:this.$route.query.imgUrl
                        }
                    }).then(res=>{

                        console.log(res.data);

                    }).catch(err=>{
                        console.log(err);
                    });
                }
            },
            submitComment(){
                if(this.userId == null){
                    this.$router.replace("/login");
                }
                let userId = sessionStorage.getItem("userId");
                let videoId = parseInt(this.id);
                let nickName = sessionStorage.getItem("nickName");
                let time = new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月" + new Date().getDate() + "日";
                request({
                    url:"/insertOne",
                    method: "post",
                    params:{
                        msg:this.textarea,
                        videoId: videoId,
                        userId: userId,
                        nickName: nickName,
                        imgUrl:this.myHeadImg,
                        time:time
                    }
                }).then(res=>{

                    this.$message({
                        message: '发布成功',
                        type: 'success'
                    });
                    //console.log(res.data);


                }).catch(err=>{
                    console.log(err);
                });
                let t = {
                    msg:this.textarea,
                    videoId: videoId,
                    userId: userId,
                    nickName: nickName,
                    imgUrl:this.myHeadImg,
                    time:time
                }

                //console.log(t);
                this.comment.unshift(t);


                //给up猪发一个通知消息
                request({
                    url:"/insertOneSysNotify",
                    method: "get",
                    params:{
                        userId:parseInt(this.upId),
                        sendId: parseInt(userId),
                        msg: "评论了我的视频",
                        pl: this.textarea,
                        time:time,
                        nickName:nickName,
                        imgUrl:sessionStorage.getItem("imgUrl"),
                        state:0,
                        type:"video",
                        id:this.id,
                        videoImg:this.$route.query.imgUrl
                    }
                }).then(res=>{

                    console.log(res.data);

                }).catch(err=>{
                    console.log(err);
                });
                this.textarea = '';
            }
        },



    }
</script>

<style scoped>
    .remeng-tuijian .bo{
        display: inline-block;
        height: 16px;
        color: #999;
        font-size: 14px;
        display: inline-block;
        margin-left: 10px;
        position: absolute;
        width: 200px;
        cursor: pointer;
        left: 140px;
        top: 60px;
    }
    .remeng-tuijian .up{
        cursor: pointer;
        display: inline-block;
        height: 16px;
        color: #999;
        font-size: 14px;
        margin-left: 10px;
        top: -30px;
        width: 200px;
        position: relative;
    }
    .remeng-tuijian .title{
        cursor: pointer;
        width: 200px;
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        height: 36px;
        line-height: 18px;
        margin-bottom: 6px;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-left: 10px;
        position: absolute;
    }
    .remeng-tuijian .title:hover{
        color: #409EFF;
    }
    .remeng-tuijian{
        display: block;
        position: relative;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .remeng-tuijian img{
        width: 140px;
        height: 80px;
    }
    .tuijian{
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
    }
    .video-list{
        width: 100%;
        height: 600px;
        background-color: #f4f4f4;
        padding-left: 10px;
        overflow: auto;

    }
    .video-list .list-head{
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .video-list ul{
        list-style: none;
    }
    .video-list ul li{
        cursor: pointer;
        width: 350px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        border-radius: 5px;
        padding-left: 10px;
        margin-bottom: 5px;
    }
    .video-list ul li:hover{
        background-color: #fff;
    }
    .video-list ul .active{
        background-color: #fff;
        color: #409EFF;
    }
    .bigbox div{
        display: inline-block;
    }
    .right-list{
        display: inline-block;
        width: 400px;
        height: 1000px;
        position: absolute;
        top: 120px;
        margin-left: 50px;
    }
    .pl-type{
        list-style: none;

        width: 1000px;
        border-bottom: 1px solid rgba(181, 189, 186, 0.3);
        margin-bottom: 10px;
    }
    .pl-type li{
        display: inline-block;
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
        width: 120px;
        text-align: center;
        cursor: pointer;
    }
    .pl-type .pl-active{
        color: #409EFF;
        padding-bottom: 10px;
        border-bottom: 1px solid #409EFF;
    }
    .danmu{
        display: inline-block;
    }
    .danmu-input{
        color: #212121;
        flex-grow: 1;
        line-height: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 12;
        font-size: 12px;
        min-width: 100px;
        border: 1px solid #dfe3df;
        height: 40px;
        width: 300px;
        position: relative;
        background-color: rgba(223, 227, 223, 0.29);
        left: 100px;
        padding-left: 10px;
        bottom: 2px;
    }
    .danmu-input:focus{
        outline: none;
    }
    .danmu-submit{
        display: inline-block;
        position: relative;
        background-color: #00a1d6;
        height: 40px;
        left: 90px;
        width: 80px;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 40px;

    }
    .download{
        font-size: 30px !important;
        position: relative;
        left: 600px;
        top: 10px !important;
    }
    .huifu{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px;
        position: relative;
        top: 3px;
        width: 40px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 5px;

    }
    .icon{
        width: 45px;
        height: 45px;
        margin-top: 18px;

    }
    .dianZan div{
        display: inline-block;
        cursor: pointer;
    }
    .dianZan div:hover{
        color: #00b0ff;

    }
    .dianZan span{
        user-select: none;
        font-size: 28px;
        line-height: 60px;
        display: inline-block;
        margin-left: 20px;
        margin-right: 40px;
        position: relative;
        top: -20px;

    }
    .dianZan{
        height: 80px;
        width: 1000px;
        border-bottom: 1px solid #e5e9f0;
        padding-bottom: 12px;
        color: #505050;
    }
    .dianZan span{
        position: relative;
        top: -10px;
    }

    .liuyan{
        display: inline-block;
        margin-left: 20px;
    }

    .player{
        width: 1000px;
    }
    .litteBiaoQian{
        color: #999;
        margin-bottom: 10px;
    }
    .plText{
        position: absolute;
        margin-left: 70px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        top: 40px;
        padding-right: 20px;
    }
    .plText a{
        cursor: pointer;
        color: #999999;
        font-size: 13px;
    }
    .plText a:hover{
        color: #409EFF;
        background-color: #dcdfe6;
    }
    .plheadName .name{
        color: #2db55d;
        margin-right: 20px;
        cursor: pointer;
    }
    .plheadName .name:hover{
        color: #409EFF;
    }
    .plheadName .time{
        color: #999999;
        font-size: 13px;
    }

    .plheadName{
        display: inline-block;
        height: 20px;
        position: absolute;
        margin-top: 20px;
        margin-left: 20px;
    }
    .plImgHead{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .subBtn{
       display: inline-block;
        position: relative;
        left: 10px;
        height: 75px;
    }
    .myHeadImg{
        display: inline-block;
        position: absolute;
        left: 10px;
    }
    .myHeadImg img{
        height: 70px;
        width: 70px;
        border-radius: 50%;
        display: inline-block;
    }
    .plInput{
        position: relative;
        margin-top: 20px;
        padding-right: 300px;
        padding-left: 100px;
        text-align: right;
        margin-bottom: 30px;
    }
    .plNum{
        position: relative;
        top: 0px;
        width: 1000px;
        height: 50px;
        line-height: 50px;
        color: #999;
        background-color: #fff;
        box-shadow: 1px 1px 1px #e8eaf1;
        box-shadow: -1px 1px 1px #e8eaf1;
        font-size: 17px;
    }
    .plNum div .plNum2{
        color: black;
        font-weight: bold;
        font-size: 20px;
        display: inline-block;
        margin-right: 5px;
    }
    .plNum div{
        margin-left: 10px;
    }
    .plImg{
        margin-top: 20px;
        margin-left: 10px;
        display: inline-block;
    }
    .plBox{
        box-shadow: 1px 1px 2px #9c9c9c;
        margin-bottom: 100px;
        width: 1000px;
    }
    .plItem{
        width: 1000px;
        height: 100px;
        position: relative;
        border-top: 1px solid #e8eaf1;

    }
    .plItem:last-child{
        border-bottom:  1px solid #e8eaf1;

    }
    h1{
        font-weight: normal;
        font-size: 25px;
        display: inline-block;
    }
    .biaoqian{
        display: inline-block;
        width: 100px;
        text-align: center;
        color: #fff;
        margin-right: 10px;
        padding: 0 5px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        color: #fff;
        background-color: #b2ebff
    }
</style>